<template>
  <div class="typing-practice-page">
    <div class="practice-container">
      <h1>在线打写</h1>
      
      <div class="content-wrapper">
        <div class="text-display">
          <div class="original-text" v-html="highlightedText"></div>
          <el-input
            type="textarea"
            v-model="userInput"
            :rows="8"
            placeholder="开始输入..."
            @input="checkInput"
            :disabled="!isStarted"
            ref="inputArea"
          ></el-input>
        </div>

        <div class="stats-panel">
          <div class="stat-item">
            <div class="label">时间</div>
            <div class="value">{{ formatTime(timer) }}</div>
          </div>
          <div class="stat-item">
            <div class="label">速度</div>
            <div class="value">{{ speed }} WPM</div>
          </div>
          <div class="stat-item">
            <div class="label">准确率</div>
            <div class="value">{{ accuracy }}%</div>
          </div>
        </div>

        <div class="control-panel">
          <div class="button-wrapper">
            <el-button type="primary" @click="startPractice" v-if="!isStarted">
              <el-icon><VideoPlay /></el-icon>
              开始练习
            </el-button>
            <el-button type="danger" @click="resetPractice" v-else>
              <el-icon><RefreshRight /></el-icon>
              重新开始
            </el-button>
            <el-button type="warning" @click="returnToHome">
              <el-icon><Back /></el-icon>
              返回首页
            </el-button>
          </div>
        </div>
      </div>

      <div class="notes">
        <h3>帮助说明：</h3>
        <ul>
          <li>点击"开始练习"按钮开始打字</li>
          <li>系统会自动计时和统计打字速度</li>
          <li>绿色表示输入正确，红色表示输入错误</li>
          <li>WPM表示每分钟输入的单词数</li>
          <li>可以随时重新开始练习</li>
          <li>建议使用英文输入法以获得最佳体验</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { VideoPlay, RefreshRight, Back } from '@element-plus/icons-vue'

const router = useRouter()
const inputArea = ref(null)
const userInput = ref('')
const timer = ref(0)
const isStarted = ref(false)
const timerInterval = ref(null)

const sampleText = `Once upon a time a little girl tried to make a living by selling matches in the street. It was New Year's Eve and the snowed streets were deserted. From brightly lit windows came the tinkle of laughter and the sound of singing. People were getting ready to bring in the new year. But the poor little match seller sat sadly beside the fountain.`

const highlightedText = computed(() => {
  if (!isStarted.value) return sampleText

  return sampleText.split('').map((char, index) => {
    if (index >= userInput.value.length) return char
    return userInput.value[index] === char
      ? `<span class="correct">${char}</span>`
      : `<span class="incorrect">${char}</span>`
  }).join('')
})

const speed = computed(() => {
  if (timer.value === 0) return 0
  const words = userInput.value.trim().split(/\s+/).length
  const minutes = timer.value / 60
  return Math.round(words / minutes)
})

const accuracy = computed(() => {
  if (userInput.value.length === 0) return 100
  let correct = 0
  for (let i = 0; i < userInput.value.length; i++) {
    if (userInput.value[i] === sampleText[i]) correct++
  }
  return Math.round((correct / userInput.value.length) * 100)
})

const startPractice = () => {
  isStarted.value = true
  userInput.value = ''
  timer.value = 0
  timerInterval.value = setInterval(() => {
    timer.value++
  }, 1000)
  inputArea.value.focus()
}

const resetPractice = () => {
  clearInterval(timerInterval.value)
  isStarted.value = false
  userInput.value = ''
  timer.value = 0
}

const checkInput = () => {
  if (userInput.value.length >= sampleText.length) {
    clearInterval(timerInterval.value)
    ElMessage.success(`练习完成！速度：${speed.value} WPM，准确率：${accuracy.value}%`)
  }
}

const formatTime = (seconds) => {
  const minutes = Math.floor(seconds / 60)
  const remainingSeconds = seconds % 60
  return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`
}

const returnToHome = () => {
  router.push('/')
}

onUnmounted(() => {
  clearInterval(timerInterval.value)
})
</script>

<style lang="scss" scoped>
.typing-practice-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: flex-start;

  .practice-container {
    max-width: 1000px;
    width: 96%;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    padding: 30px;
    box-sizing: border-box;
    margin: 10px auto;

    h1 {
      text-align: center;
      color: #4a5568;
      font-size: 28px;
      margin-bottom: 30px;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    }

    .content-wrapper {
      .text-display {
        margin-bottom: 30px;

        .original-text {
          font-family: 'Monaco', 'Courier New', monospace;
          font-size: 18px;
          line-height: 1.6;
          padding: 20px;
          background-color: #f8fafc;
          border-radius: 8px;
          margin-bottom: 20px;
          white-space: pre-wrap;

          :deep(.correct) {
            color: #67C23A;
            background-color: rgba(103, 194, 58, 0.1);
          }

          :deep(.incorrect) {
            color: #F56C6C;
            background-color: rgba(245, 108, 108, 0.1);
            text-decoration: underline wavy #F56C6C;
          }
        }

        .el-textarea {
          :deep(.el-textarea__inner) {
            font-family: 'Monaco', 'Courier New', monospace;
            font-size: 18px;
            line-height: 1.6;
            padding: 15px;
          }
        }
      }

      .stats-panel {
        display: flex;
        justify-content: space-around;
        margin-bottom: 30px;
        padding: 20px;
        background-color: #f0f5ff;
        border-radius: 12px;

        .stat-item {
          text-align: center;

          .label {
            color: #606266;
            margin-bottom: 5px;
          }

          .value {
            font-size: 24px;
            font-weight: bold;
            color: #409EFF;
          }
        }
      }

      .control-panel {
        margin: 20px 0;

        .button-wrapper {
          display: flex;
          gap: 15px;
          justify-content: center;

          .el-button {
            min-width: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 12px 20px;
            font-size: 14px;
            border-radius: 8px;
            transition: all 0.3s ease;

            &:hover {
              transform: translateY(-2px);
              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            }

            .el-icon {
              font-size: 16px;
            }
          }
        }
      }
    }

    .notes {
      margin-top: 40px;
      padding: 20px;
      background-color: #f0f5ff;
      border-radius: 12px;
      color: #606266;
      text-align: left;

      h3 {
        color: #409EFF;
        margin: 0 0 15px 0;
        font-size: 16px;
      }

      ul {
        margin: 0;
        padding-left: 20px;
        
        li {
          margin-bottom: 8px;
          line-height: 1.6;

          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .typing-practice-page {
    padding: 10px;

    .practice-container {
      padding: 20px;

      h1 {
        font-size: 24px;
        margin-bottom: 20px;
      }

      .content-wrapper {
        .text-display {
          .original-text {
            font-size: 16px;
            padding: 15px;
          }
        }

        .stats-panel {
          flex-direction: column;
          gap: 15px;
        }

        .control-panel {
          .button-wrapper {
            flex-direction: column;
            padding: 0 20px;

            .el-button {
              width: 100%;
              margin: 0;
              justify-content: center;
            }
          }
        }
      }

      .notes {
        padding: 15px;

        h3 {
          font-size: 15px;
        }

        ul li {
          font-size: 13px;
          margin-bottom: 8px;
        }
      }
    }
  }
}
</style> 